import React from 'react';
import {
    View,
    Text,
    ScrollView,
    DeviceEventEmitter,
    TouchableOpacity, Image,
} from 'react-native';
import {
    Card,
    InputItem,
    List,
} from '@ant-design/react-native';
import Dict from '../../../common/Dict';
import GlobalStyles from "../../../common/styles/GlobalStyles";
import {StylesConstant} from "../../../common/Constant";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import NavigationUtil from "../../../navigators/NavigationUtil";
import AntDesign from "react-native-vector-icons/AntDesign";


export default class AddPersonalInfoForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            userInfoVo: {
                contactName:'',
                contactGender:'',
                contactGenderLabel : '',
                contactIdType: '',
                contactIdTypeLabel: '',
                contactIdNumber: '',
                contactPhone:'',
                contactEmail:'',
                contactAddress:'',
                unitName:'',
                position: '',
            },
            userInfoList: []
        };
    }

    //
    componentDidMount(){
        this.personalListen = DeviceEventEmitter.addListener(
            'addPersonalInfo',
            (events) => {
                // console.log('***********');
                // console.log(events)
                const list = this.state.userInfoList
                list.push({
                    ...events,
                    contactIdNumber: events.idNumber,
                    counterpartType: 0
                })
                this.setState({
                    userInfoList: list
                })
                this.props.onChange && this.props.onChange(list)
                this.props.transmitList(list)
            },
        );
    }
    componentWillUnmount() {
        this.personalListen && this.personalListen.remove();
    }

    setData(data){
        this.setState({
            userInfoList: data
        })
    }

    removeUserInfo(idx){
        console.log(idx)
        this.state.userInfoList.splice(idx,1)
        this.setState({
            userInfoList: this.state.userInfoList
        })
    }
    _renderCardBtn(index){
        return (
            <View>
                <TouchableOpacity
                    style={{textAlign: 'right',alignItems:'flex-end'}}
                    onPress={()=>this.removeUserInfo(index)}
                >
                    <FontAwesome
                        name={'minus-circle'}
                        size={18}
                        color={'#ec494e'}
                    />
                </TouchableOpacity>
            </View>
        )
    }
    renderInfoCard(){
        const {type} = this.props
        const list = []
        this.state.userInfoList.map((item,index)=>{
            list.push(
                // <TouchableOpacity
                //     key={index}
                // >
                    <Card
                        key={index}
                        style={{borderColor: StylesConstant.themeIconColor,marginBottom: 10}}
                    >
                        <Card.Header
                            title={item.contactName}
                            extra={type?null:this._renderCardBtn(index)}
                        >
                        </Card.Header>
                        <Card.Body style={{paddingLeft: 15,paddingRight: 0, borderColor: StylesConstant.themeIconColor}}>
                            <View style={GlobalStyles.personalCardRow}>
                                <Text style={{flex: 1,textAlign: 'left'}}>联系电话：{item.contactPhone}</Text>
                                <Text style={{flex: 1,textAlign: 'left'}}>性别：{item.contactGender=='0'?'女':'男'}</Text>
                            </View>
                            <View style={GlobalStyles.personalCardRow}>
                                <Text style={{flex: 1,textAlign: 'left'}}>证件类型：{item.contactIdTypeLabel || item.idTypeLabel}</Text>
                                <Text style={{flex: 1,textAlign: 'left'}}>身份证：{item.idNumber || item.contactIdNumber}</Text>
                            </View>
                        </Card.Body>
                    </Card>
                // </TouchableOpacity>
            )
        })
        return list
        // {"age": 0, "contactAddress": "1341", "contactEmail": "123@qq.com", "contactGender": "0", "contactGenderLabel": "", "contactIdNumber": "51203216985497", "contactIdType": 1, "contactIdTypeLabel": "身份证", "contactName": "高鹏", "contactPhone": "15756215938", "counterpartId": 68, "email": "123@qq.com", "gender": 0, "idNumber": "51203216985497", "idType": 1, "idTypeLabel": "身份证", "name": "高鹏", "password": "$2a$10$ptVd8LWc0buUgVsu6r3bu.MGub7swjCic7gmU0U5XvM5B2YUX1fIe", "pictureId": null, "pictureUrl": "", "position": "职务", "unitName": "工作"}
    }
    render() {
        const userInfoVo = this.state.userInfoVo
        const {type} = this.props
        return (
            <View style={[GlobalStyles.innerTabPanel,{flexDirection: 'column',flex: 1}]}>
                {type?null:this._renderHeaderBtns()}
                <ScrollView
                    style={{flex: 1}}
                    automaticallyAdjustContentInsets={false}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}>
                    {this.renderInfoCard()}
                </ScrollView>
            </View>
        );
    }
    onChoosePoint(item) {
        console.log(item)
    }
    // 跳转添加个人页面
    _handleToAddPerson() {
        NavigationUtil.goPage('EditPersonalInfoPage')
    }
    _renderHeaderBtns(){
        return (
            <View style={{flexDirection: 'row', marginBottom: 10}}>
                <TouchableOpacity
                    style={{flexDirection: 'row',textAlign:'center',justifyItems:'center',flex: 1,marginRight: 5,height: 40,borderWidth: 1,borderStyle: 'dashed',borderColor: StylesConstant.themeIconColor,alignItems: 'center',justifyContent: 'center',borderRadius: 10}}
                    onPress={()=>this._handleToAddPerson()}
                >
                    <FontAwesome name={'plus'} size={16} color={StylesConstant.themeIconColor}/>
                    <Text style={{color: StylesConstant.themeIconColor,paddingLeft: 5}}>添加个人信息</Text>
                </TouchableOpacity>
            </View>
        )
    }
}
